@import 'mixins';

#header.common-header {
  box-shadow: 0px 5px 7px 0px #F5F5F5;
  // .top {
  //   height: 1.14rem;
  // }
}

.search-head {
  padding: rem(30) rem(26) 0;
  box-sizing: border-box;
  .search-wrap {
    @include flex(row,center,flex-end);
    height: rem(75);
    background: #F8F8FA;
    border-radius: rem(38);
    .icon {
      width: rem(24);
      height: rem(24);
      margin-right: rem(10);
    }
    .input {
      height: rem(75);
      background-color: transparent;
      font-size: rem(20);
      width: 60%;
    }
  }
}
.ny-header.study-recommend {
  height: 0.96rem;
  .bg {
    height: 0.96rem;
  }
  .menu-list {
    box-shadow: none;
    border-bottom: rem(2) solid #EFEFEF;
    width: 100%;
    overflow: auto;
    .menu-list-flex {
      display: inline-flex;
      white-space: nowrap;
    }
    .li {
      height: rem(96);
      width: auto;
      padding: 0 rem(24);
      &::after {
        content: none;
      }
      &.active {
        position: relative;
        &::before {
          content: '';
          width: rem(44);
          height: rem(7);
          background: #02C176;
          border-radius: rem(4);
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: rem(-22);
        }
      }
    }
  }
}

.container {
  .module {
    overflow: hidden;
    width: 100%;
    padding-bottom: rem(30);
    padding-left: rem(24);
    padding-right: rem(24);
    text-align: center;
    &.white, .bg-white {
      background-color: #fff;
    }
    &.gray {
      background-color: #F8F8FA;
    }
    .module-box {
      box-sizing: border-box;
      padding: rem(36) rem(30) rem(30);
      overflow: hidden;
      background: #FFFFFF;
      border-radius: rem(20);
    }
    .module-title {
      display: inline-block;
      height: rem(62);
      line-height: rem(60);
      border: rem(1) solid #02C176;
      border-radius: rem(10);
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-left: rem(32);
      padding-right: rem(32);
      font-size: rem(28);
      font-weight: 500;
      color: #02C176;
    }
  }
}

.study-banner-wrapper {
  img {
    width: 100%;
    margin-top: rem(24);
  }
}

.study-country-wrapper {
  .list {
    margin-top: rem(30);
    @include flex(row,center,space-between);
    .item {
      @include flex(column,center,center);
      .icon {
        width: rem(66);
        height: rem(66);
        margin-bottom: rem(14);
      }
      .name {
        font-size: rem(24);
        color: #333333;
      }
    }
  }
}

.study-read-wrapper {
  .list {
    margin-top: rem(32);
    .item {
      height: rem(135);
      box-sizing: border-box;
      margin-bottom: rem(21);
      border-radius: rem(12);
      width: 100%;
      border-width: rem(1);
      border-style: solid;
      @include flex;
      padding-left: rem(34);
      padding-right: rem(24);
      .info {
        flex: 1;
        text-align: left;
        line-height: 1.1;
        .name {
          font-size: rem(32);
          color: #000000;
          margin-bottom: rem(16);
          font-weight: bold;
        }
        .eng {
          font-size: rem(28);
          color: #999;
        }
      }
      .icon {
        height: rem(102);
        width: auto;
      }
    }
  }
}

.study-mode-wrapper {
  .list {
    margin-top: rem(46);
    @include flex(row,center,space-around);
    flex-wrap: wrap;
    .item {
      margin-bottom: rem(40);
      width: 25%;
      .icon {
        width: rem(107);
        height: rem(102);
        margin-bottom: rem(20);
      }
      .name {
        line-height: 1.1;
        font-size: rem(28);
        color: #333333;
      }
    }
  }
}

.study-area-wrapper {
  .module-title {
    margin-top: rem(20);
  }
  .list {
    margin-top: rem(50);
    .item {
      margin-bottom: rem(8);
      .city {
        width: 100%;
        height: rem(95);
        background: #FFFFFF;
        box-shadow: 0 0 rem(9) 0 rgba(152,152,152,0.41);
        border-radius: rem(10);
        @include flex;
        box-sizing: border-box;
        padding: 0 rem(30);
        .name {
          font-size: rem(28);
          color: #000000;
          flex: 1;
          overflow: hidden;
          text-align: left;
        }
        .arrow-box {
          width: rem(40);
          height: rem(40);
          transition: all 300ms;
          .arrow {
            @include arrow(40,#bbb,2);
          }
        }
      }
      .school-list {
        transition: all 300ms;
        height: 0;
        overflow: hidden;
        flex-wrap: wrap;
        @include flex(row, center, space-around);
        .school-item {
          width: 47%;
          text-align: center;
          height: rem(60);
          border: rem(1) solid #02C176;
          border-radius: rem(8);
          font-size: rem(20);
          color: #036A61;
          line-height: rem(58);
          margin-bottom: rem(24);
          white-space: nowrap;
        }
      }
      &.active {
        .city{ 
          background-color: #02C176;
          .name {
            color: #fff;
          }
          .arrow-box {
            transform: rotate(90deg);
            .arrow {
              &::after {
                border-color: #fff;
              }
            }
          }
        }
        .school-list {
          height: auto;
          padding-top: rem(24);
        }
      }
    }
  }
}

.study-subject-wrapper {
  padding-top: rem(38);
  margin-bottom: -0.3rem;
  .list {
    margin-top: rem(50);
    @include flex(row, center, space-between);
    flex-wrap: wrap;
    .item {
      @include flex(column);
      margin-bottom: rem(24);
      margin-right: rem(30);
      &:nth-child(5n) {
        margin-right: 0;
      }
      .icon {
        width: rem(80);
        height: rem(80);
        margin-bottom: rem(16);
      }
      .name {
        font-size: rem(24);
        color: #333333;
        line-height: 1.1;
      }
    }
  }
}

.study-special-wrapper {
  padding-top: rem(38);
  .list {
    @include flex(row,center,space-between);
    margin-bottom: rem(34);
    margin-top: rem(38);
    .item {
      flex:1;
      overflow: hidden;
      .icon {
        width: rem(90);
        height: rem(90);
        margin-bottom: rem(14);
      }
      .name {
        font-size: rem(20);
        color: #222222;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 rem(12);
        box-sizing: border-box;
      }
    }
  }
  .spec-box {
    border: rem(1) solid #D0D0D0;
    margin: rem(1);
    border-radius: rem(8);
    box-sizing: border-box;
    padding: 0 rem(28) rem(30);
    .head {
      @include flex;
      height: rem(84);
      .name {
        color: #222222;
        font-size: rem(28);
        flex: 1;
        text-align: left;
      }
      .arrow {
        @include arrow(38,#999,2);
      }
    }
    .photo {
      width: 100%;
      height: rem(280);
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .my-swipe {
    padding-bottom: rem(48);
    .van-swipe__indicator {
      transition: all 300ms;
    }
    .van-swipe__indicator--active {
      width: 12px;
      border-radius: 3px;
    }
  }
}

.screen-container {
  background-color: #fff;
  box-sizing: border-box;
  padding: rem(30) 0 rem(30) rem(30);
  box-sizing: border-box;
  min-height: 70vh;
  .title {
    font-size: rem(28);
    color: #000000;
    line-height: 1.2;
    margin-bottom: rem(36);
  }
  .country-list {
    width: 100%;
    overflow: auto;
    margin-bottom: rem(40);
    margin-top: rem(-20);
    .inline-box {
      display: inline-flex;
      white-space: nowrap;
      overflow: hidden;
      .item {
        @include flex(column,center,center);
        padding: rem(20);
        color: #333333;
        border-radius: rem(10);
        &.active {
          background-color: #02C176;
          color: #fff;
        }
        .icon {
          border-radius: 50%;
          box-shadow: rem(2) rem(3) rem(7) 0 rgba(199,199,199,0.43);
          width: rem(86);
          height: rem(86);
          background-color: #fff;
          @include flex;
          margin-bottom: rem(16);
          img {
            display: block;
            width: rem(66);
            height: rem(66);
          }
        }
        .name {
          font-size: rem(22);
          line-height: 1.2;
        }
      }
    }
  }
  .news-box {
    @include flex(row,flex-start,flex-start);
    flex-wrap: wrap;
    .item {
      height: rem(65);
      background: #F8F8FA;
      border-radius: rem(10);
      padding: 0 rem(24);
      @include flex;
      margin-right: rem(20);
      margin-bottom: rem(20);
      color: #666666;
      &.active {
        background-color: #02C176;
        color: #fff;
      }
      img {
        width: rem(21);
        height: rem(24);
        margin-right: rem(10);
      }
      span {
        font-size: rem(22);
      }
    }
  }
}

.main-menu-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  .bg {
    width: 100%;
    height: 100%;
    background: rgba(#000,.5);
  }
  .menu-wrapper {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: rem(413);
    height: 100%;
    overflow: auto;
    .menu-list {
      padding: rem(25) 0 rem(18);
      text-align: center;
      @include flex(column);
      .item {
        font-size: rem(28);
        color: #333333;
        line-height: rem(40);
        margin: rem(25) 0;
        &.active {
          color: #02C176;
        }
      }
    }
    .tags {
      @include flex;
      flex-wrap: wrap;
      margin-bottom: rem(30);
      .item {
        width: rem(151);
        height: rem(49);
        line-height: rem(49);
        text-align: center;
        background: #02C176;
        border-radius: rem(24);
        margin: rem(10) rem(6);
        font-size: rem(24);
        color: #FFFFFF;
      }
    }
    .introduce {
      font-size: rem(18);
      color: #02C176;
      text-align: center;
      line-height: 1.8;
      margin-bottom: rem(40);
    }
    .logo-wrap {
      background-color: #F4FFFB;
      padding: rem(32) 0;
      margin-bottom: 1.2rem;
      .logo-box {
        width: rem(193);
        height: rem(97);
        background: #FFFFFF;
        border-radius: rem(10);
        margin: auto;
        @include flex;
        img {
          width: rem(104);
          height: rem(49);
        }
      }
    }
  }
}

.main-nav-container {
  position: absolute;
  width: 100%;
  top: 1.24rem;
  left: 0;
  z-index: 99;
  .nav-box {
    position: relative;
    z-index: 101;
    background-color: #fff;
    overflow: hidden;
  }
  .bg {
    width: 100%;
    height: 100vh;
    background: rgba(#000,.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .head-box {
    @include flex;
    height: rem(88);
    box-sizing: border-box;
    padding: 0 rem(38) 0 rem(48);
    .title {
      flex: 1;
      font-size: rem(28);
      color: #02C176;
      font-weight: bold;
    }
    .close {
      padding: rem(10);
      img {
        width: rem(32);
        height: rem(32);
      }
    }
  }
  .list {
    @include flex(row,center,space-between);
    padding: 0 rem(34);
    box-sizing: border-box;
    flex-wrap: wrap;
    .item {
      width: rem(161);
      height: rem(59);
      line-height: rem(59);
      text-align: center;
      background: #F8F8FA;
      border-radius: rem(30);
      font-size: rem(24);
      color: #333333;
      margin-bottom: rem(14);
      &.active {
        background-color: #02C176;
        color: #fff;
      }
    }
  }
  .result-btn {
    display: block;
    width: rem(256);
    height: rem(66);
    background: #02C176;
    border-radius: rem(33);
    margin: rem(15) auto rem(30);
    @include flex;
    span {
      font-size: rem(24);
      color: #FFFFFF;
      margin-right: rem(6);
    }
    img {
      width: rem(22);
      height: rem(26);
    }
  }
}

.mask-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .bg {
    width: 100%;
    height: 100%;
    background: rgba(#000,.5);
  }
  .mask-wrapper {
    @include flex(column);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    .mask-photo {
      width: rem(586);
      height: rem(687);
      margin-bottom: rem(6);
      position: relative;
      a {
        display: block;
        position: absolute;
        width: rem(304);
        height: rem(64);
        bottom: rem(40);
        left: 50%;
        transform: translateX(-50%);
        border-radius: rem(32);
      }
      img {
        display: block;
        width: 100%;
        height:100%;
      }
    }
    .close {
      width: rem(60);
      height: rem(60);
    }
  }
}

.abroad-nav-box {
  @include flex;
  position: relative;
  z-index: 3;
  &.abroad-nav-main-box {
    box-shadow: 0 rem(2) rem(10) 0 rgba(#333,.1);
    z-index: 4;
  }
  .nav-item {
    height: rem(80);
    flex: 1;
    overflow: hidden;
    @include flex;
    line-height: rem(30);
    position: relative;
    &:nth-child(2) {
      &::before {
        content: '';
        width: 1px;
        height: rem(28);
        background-color: #dadada;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: rem(-14);
      }
      &::after {
        content: '';
        width: 1px;
        height: rem(28);
        background-color: #dadada;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: rem(-14);
      }
    }
    &.active {
      .name {
        color: #02C176;
      }
      .arrow {
        border-top-color: #02C176;
      }
    }
    .name {
      font-size: rem(28);
      color: #333333;
      margin-right: rem(20);
    }
    .arrow {
      width: 0;
      height: 0;
      border-left: rem(10) solid transparent;
      border-right: rem(10) solid transparent;
      border-top: rem(12) solid #999;
    }
  }
  .nav-child {
    position: relative;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 rem(6) rem(10) 0 rgba(#000,.1);
    @include flex(row,center,flex-start);
    overflow: hidden;
    padding: rem(32) rem(32) rem(4);
    flex-wrap: wrap;
    .item {
      width: calc((100% - 1.2rem) / 4);
      height: rem(52);
      margin-right: rem(40);
      line-height: rem(52);
      text-align: center;
      background: #F8F8FA;
      border-radius: rem(10);
      margin-bottom: rem(28);
      color: #333333;
      font-size: rem(22);
      &:nth-child(4n) {
        margin-right: 0;
      }
      &.active {
        color: #fff;
        background-color: #02C176;
      }
    }
  }
}

.full {
  min-height: calc(100vh - 4.95rem);
}
